<template>
  <van-list v-model="mivaLoading" :finished="finished" finished-text="没有更多了" @load="onLoad">
    <div class="container-item-list-home">
      <div v-for="(temp,index) in list" :key="index" class="container-once">
        <div class="item-list" @click="routerLink(`productDetails`, temp.id)">
          <div class="container-image">
            <van-image class="item-cover" width="100%" height="100%" :src="temp.img" fit="cover" />
          </div>
          <div class="group-info">
            <div class="item-name">{{ temp.product_name }}</div>
            <div class="item-stock">已售：{{ temp.sales_volume }}</div>
            <div class="pirse"> ￥<span>{{ temp.money | saveNum }}</span> </div>
          </div>
        </div>
      </div>
    </div>
  </van-list>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    finished: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      mivaLoading: false
    }
  },
  watch: {
    loading(val) {
      this.mivaLoading = val
    }
  },
  methods: {
    async onLoad() {
      if (this.loading) {
        console.log('加载事件被拦截')
        return
      }
      console.log('加载事件触发')
      this.$emit('load')
    },
    routerLink(name, id) {
      console.log('首页详情列表点击-log:', name, id)
      this.$router.push({ name, params: { id }})
    }
  }
}
</script>

<style lang="less">
.container-item-list-home {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  .container-once {
    width: 50%;
    padding: 5px;
  }
  .item-list {
    border-radius: 5px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 0 2px #aaa;
  }
  .group-info {
    padding: 5px;
    .item-name {
      font-size: 15px;
      // font-weight: bold;
      color: #000;
    }
    .item-stock {
      font-size: 14px;
      color: #999999;
    }
    .pirse {
      font-size: 16px;
      text-align: right;
      color: #d63a54;
      span {
        font-size: 22px;
      }
    }
  }
}
</style>
